<template>
  <div>
  <div v-if="componentIs('notice')"  class="mod-config" >
    <div class="div-s" >
      <el-form :model="params"  ref="queryFormRef" :inline="true" label-width="70px" class="queryFormed">
        <el-row class="row-s">
          <el-col :span="6">
            <el-form-item label="类型" >
              <el-select v-model="params.typeId" placeholder="全部" @clear="clearType" clearable>
                <el-option
                  v-for="item in typeOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">

                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="消息内容" >
              <el-input v-model="params.content" placeholder="请输入消息内容" @clear="clickSearch"  clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="操作人" >
              <el-input v-model="params.name" placeholder="请输入操作人名称" @clear="clickSearch" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col class="col-right" :span="6">
            <el-form-item class="item-all">
              <el-button class="buttonItem" size="mini" plain @click="clickReset()">重 置</el-button>
              <el-button class="buttonItem" size="mini" type="primary" @click="clickSearch()">搜 索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="div-e" >
      <div class="div-inquire" id="div-inquire-id">
        <div class="in-t">
          <div class="in-ts"></div>
          <h3 >消息中心</h3>
        </div>
      </div>
      <div style="position: relative">
        <el-tabs class="tabs-s"  v-model="activeName" @tab-click="handleTabClick">
          <el-tab-pane label="全部" name="first"></el-tab-pane>
          <el-tab-pane label="未读信息" name="second"></el-tab-pane>
          <el-tab-pane label="已读信息" name="third"></el-tab-pane>
        </el-tabs>
        <div style="background-color: #F56B6C;
                      color:#FFFFFF;
                      border-radius: 50%;
                      height: 16px;
                      width: 16px;
                      position: absolute;
                      line-height: 16px;
                      text-align: center;
                      font-size: 10px;
                      top:3px;
                      left: 143px;
                      z-index: 99;">{{unreadAmount}}</div>
        <el-table
          ref="multipleTable"
          :data="tableData"
          :max-height="table.tableHeight"
          :header-cell-style="{background:'#F5F7FA'}"
          style="width: 100%"
          v-loading="dataListLoading"
          fit>
          <el-table-column label="消息内容"   min-width="600"  show-overflow-tooltip>
            <template slot-scope="scope">
              <div><div v-if="scope.row.readFlag === 0" style="width: 6px;height: 6px;background: #E96E6E;border-radius: 50%;display: inline-block;margin-right: 10px"></div><span>{{scope.row.content}}</span></div>
            </template>
          </el-table-column>
          <el-table-column label="操作人" prop="createByName"  min-width="200" show-overflow-tooltip></el-table-column>
          <el-table-column label="通知时间" prop="createTime"  min-width="200"></el-table-column>
          <el-table-column label="状态" width="100">
            <template slot-scope="scope">
              <span :class="[scope.row.readFlag === 0 ? '' : 'normal-color']">{{scope.row.readFlag === 0 ? '未读' : '已读'}}</span>
            </template>
          </el-table-column>
        </el-table>
          <el-pagination
            @size-change="changePageSize"
            @current-change="turnToPage"
            :current-page="queryInfo.pageIndex"
            :page-sizes="[5, 10, 20, 50, 100, 200]"
            :page-size="queryInfo.pageSize "
            layout="total, prev, pager, next, sizes, jumper"
            :total="totalPage"
            id="div-e-paging-id">
          </el-pagination>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import BasePaging from '../../common/BasePaging'
import {getNoticePagging, getUnreadAmount, noticeType} from '../../../api/notice/notice'

export default {
  name: 'notice',
  extends: BasePaging,
  created () {
    this.getUnreadAmountReq()
    this.getTypeOption()
    this.paging()
  },
  data () {
    return {
      params: {
        // 全部默认为''
        typeId: null,
        readFlag: null,
        content: null,
        name: null
      },
      tableData: [],
      dataListLoading: false,
      componentFlag: 'notice',
      activeName: 'first',
      typeOptions: [],
      unreadAmount: ''

    }
  },
  methods: {
    paging (conditions = {}) {
      let _conditions = {}
      if (Object.keys(conditions).length === 0) {
        // 查询
        _conditions.typeId = this.params.typeId
        _conditions.readFlag = ''
      } else {
        _conditions = conditions
      }
      this.dataListLoading = true
      getNoticePagging({
        'conditions': _conditions,
        'inOrder': '',
        'orderBy': '',
        'pageNum': this.queryInfo.pageIndex,
        'pageSize': this.queryInfo.pageSize
      }, (data) => {
        let _data = data.data
        this.tableData = _data.records
        this.totalPage = _data.total
        this.dataListLoading = false
      })
    },
    getUnreadAmountReq () {
      getUnreadAmount({}, (data) => { this.unreadAmount = data.data.amount })
    },
    // 判断当前什么组件
    componentIs (val) {
      return this.componentFlag === val
    },
    // 更改组件显示
    changeComponent (to) {
      this.componentFlag = to
      this.paging()
    },
    clickReset () {
      this.params.typeId = ''
      this.paging()
    },
    clickSearch () {
      let conditions = {}
      conditions['content'] = this.params.content
      conditions['createByName'] = this.params.name
      this.activeName = 'first'
      this.queryInfo.pageIndex = 1
      this.paging(conditions)
    },
    getTypeOption () {
      this.typeOptions = noticeType
    },
    clearType () {
      this.paging()
    },
    handleTabClick () {
      let conditions = {}
      if (this.activeName === 'first') {
        // 全部
        conditions.typeId = ''
        conditions.readFlag = ''
      } else if (this.activeName === 'second') {
        // 未读
        conditions.typeId = ''
        conditions.readFlag = 0
        this.getUnreadAmountReq()
      } else if (this.activeName === 'third') {
        // 已读
        conditions.typeId = ''
        conditions.readFlag = 1
      }
      this.paging(conditions)
    }
  }
}
</script>

